<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    :close-on-click-modal="false"
    center
    :before-close="handleClose"
  >
    <el-form :ref="postForm" :rules="postRules" :model="postData" label-width="120px">
      <el-form-item label="流程名" prop="processId">
        <el-select v-model="postData.processId" disabled>
          <el-option
            v-for="item in processList"
            :key="item.id"
            :label="item.processName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="流程节点编码" prop="processNodeCode">
        <el-input v-model="postData.processNodeCode" :disabled="optFlag === 'view'"></el-input>
      </el-form-item>
      <el-form-item label="流程节点名" prop="processNodeName">
        <el-input v-model="postData.processNodeName" :disabled="optFlag === 'view'"></el-input>
      </el-form-item>
      <el-form-item label="审批类型" prop="approvalType">
        <el-radio-group v-model="postData.approvalType" :disabled="optFlag === 'view'">
          <el-radio label="one_sign">单人审批</el-radio>
          <el-radio label="or_sign">多人或签</el-radio>
          <el-radio label="and_sign">多人会签</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="postData.sort" :min="0" type="number" :disabled="optFlag === 'view'"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import processNodeApi from '@/api/common/processNodeApi'
import processApi from '@/api/common/processApi'

export default {
  name: 'OptProcessNode',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    processId: Number,
    processNodeId: Number,
    optFlag: String
  },
  data() {
    return {
      postData: {
        processId: null,
        approvalType: ''
      },
      processList: [],
      postForm: 'postForm',
      postRules: {
        processNodeCode: [
          { required: true, message: '请输入流程节点编码', trigger: 'blur' }
        ],
        processNodeName: [
          { required: true, message: '请输入流程节点名', trigger: 'blur' }
        ],
        approvalType: [
          { required: true, message: '请选择审批类型', trigger: 'change' }
        ],
        sort: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    title() {
      let title = ''
      switch (this.optFlag) {
        case 'add':
          title = '新增'
          break
        case 'update':
          title = '修改'
          break
        case 'view':
          title = '查看'
          break
      }
      return title
    }
  },
  created() {
    this.getProcessList()
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible) {
        if (this.processNodeId) {
          this.get()
        }
        if (this.processId) {
          this.postData.processId = this.processId
        }
      }
    }
  },
  methods: {
    get() {
      processNodeApi.get(this.processNodeId).then(res => {
        this.postData = res.data
      })
    },
    getProcessList() {
      processApi.getList({}).then(res => {
        this.processList = res.data
      })
    },
    submit() {
      this.$refs[this.postForm].validate((valid) => {
        if (valid) {
          if ('add' === this.optFlag) {
            this.add()
          } else if ('update' === this.optFlag) {
            this.update()
          } else {
            this.$message({
              message: '非法操作！',
              type: 'warning'
            })
          }
        } else {
          return false
        }
      })
    },
    add() {
      processNodeApi.add(this.postData).then(res => {
        this.successTip('操作成功！')
      })
    },
    update() {
      processNodeApi.update(this.postData).then(res => {
        this.successTip('操作成功！')
      })
    },
    successTip(msg) {
      this.$message({
        message: msg,
        type: 'success'
      })
      this.refresh()
    },
    refresh() {
      this.handleClose()
      this.$emit('refresh')
    },
    handleClose() {
      this.$emit('update:dialogVisible', false)
      this.reset()
    },
    reset() {
      this.postData = {
        approvalType: '1'
      }
      this.$refs[this.postForm].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
